/*
Table of Contents:

	ELEMENTS
	PAGE BAR
		Panel Buttons
	PANELS
		Default Panel Sizes
		Panel Sections
		Panel Resize Handles
		Panel Titles
		Panel Tabs
		Panel Contents
		Links on Panels
		Forms on Panels
		Chat
		Tiles and Brushes
		Peice Images
		Character Stats
	MAP
		Layers
		Pieces
	WELCOME
	INSTALL BOX
	MISCELLANEOUS

*/

/* ELEMENTS */

body {
	margin: 0;
	padding: 0;
	background: #cb8;
	font-size: 14px;
	font-family: Arial,Helvetica,sans-serif;
	scrollbar-face-color:#8080FF;
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-track-color:#DDDDFF;
	scrollbar-shadow-color:'';
	scrollbar-highlight-color:'';
	scrollbar-3dlight-color:'';
	scrollbar-darkshadow-Color:'';
}

input, select {
	margin: 0;
	padding: 0;
	border: 1px solid #CCC;
/*	float: left; */
}

input[type=text], input[type=password] {width: 170px;}

.panel input[type=text] {width: 70px;}
.panel input[type=text][size='1'] {width: 10px; text-align: right;}
.panel input[type=text][size='2'] {width: 20px; text-align: right;}
.panel input[type=text][size='3'] {width: 30px; text-align: right;}
.panel input[type=text][size='4'] {width: 40px; text-align: right;}

table {border-collapse: collapse;}
th, td {padding: 0;}

.template {display: none;}

/* PAGE BAR */

#pageBar {
	background: black url(images/ui/pageBar.jpg) repeat-x left top;
	min-height: 26px;
	width: 100%;
	position: fixed;
	top: 0;
	overflow: auto;
	display: none;
}

#logo {
	background: url(images/ui/logo.png) no-repeat;
	width: 170px;
	height: 33px;
	position: fixed;
	left: 10px;
	top: 0;
}

/* Panel Buttons: these buttons show and hide panels */

#panelButtons {
	margin-left: 155px;
	position: relative;
}

.panelButton {
	height: 22px;
	float: left;
	margin: 0 0 0 12px;
	color: #CCC;
	font-size: 16px;
	padding: 3px 1px 0 2px;
}

.panelButton:hover {
	cursor: pointer;
	color: #EEE;
}

.panelButton::before {
	display: block;
	content: url(images/ui/buttonUncheck.png);
	width: 19px;
	height: 19px;
	float: left;
	margin-top: 1px;
}

.panelButton.checked::before {content: url(images/ui/buttonCheck.png);}

/* View Controls */

#viewControls {
	margin: 2px 5px 2px 5px;
	float: right;
}

#viewControls input {
	height: 21px;
	width: 21px;
	background-color: #999;
}

/* PANELS: moveable, resizeable windows overlaying the map */

/* main panel container */
.panel {
	position: fixed;
	display: none;
	z-index: 0;
	background: #FFF;
	border: 1px solid #333;
	border-radius: 6px;
	color: #333;
}
.panel > * {margin: -1px;}

.panel.disabled {display: none !important;}
.panelButton.disabled {opacity: 0.5;}
.panelButton.disabled:hover {
	cursor: default;
	color: #CCC;
}

/* Default Panel Sizes */

.panel[data-panel=user]      {left: 0; top: 26px;  width: 260px; height: 200px;}
.panel[data-panel=campaign]  {left: 0; top: 49px;  width: 360px; height: 300px;}
.panel[data-panel=map]       {left: 0; top: 72px;  width: 250px; height: 300px;}
.panel[data-panel=character] {left: 0; top: 95px;  width: 370px; height: 300px;}


/* Panel Resize Handles */

.resizeTL, .resizeTR, .resizeBL, .resizeBR {position: absolute;}
.resizeTL {
	background: url(images/ui/resizeTL.png);
	width: 15px;
	height: 23px;
	left: -5px;
	top: 0;
	cursor: nw-resize;
}
.resizeTR {
	background: url(images/ui/resizeTR.png);
	width: 10px;
	height: 23px;
	right: -5px;
	top: 0;
	cursor: ne-resize;
}
.resizeBL {
	background: url(images/ui/resizeBL.png);
	height: 13px;
	width: 13px;
	left: 0;
	bottom: 0;
	cursor: sw-resize;
}
.resizeBR {
	background: url(images/ui/resizeBR.png);
	height: 13px;
	width: 13px;
	right: 0;
	bottom: 0;
	cursor: se-resize;
}

/* Panel Titles */

.title {
	cursor: pointer;
	position: relative; /* contains absolute positioned .resizeTL/TR and .close */
	background: url(images/ui/panelBar.jpg) repeat-x top left;
	height: 23px;
	margin: -1px 4px 0 4px;
}
.title .caption {
	background: url(images/ui/titleBG.jpg) repeat-x top left;
	height: 21px;
	float: left; /* remove, change padding to margin: 2px auto 0 0; ? */
	color: #333;
	font-size: 16px;
	text-decoration: none;
	padding: 2px 2px 0 10px;
}
.title .caption::after {
	content: url(images/ui/titleEnd.jpg);
	width: 5px;
	height: 23px;
	margin: -2px -7px 0 0;
	float: right;
}
.close {
	background-image: url(images/ui/close.png);
	position: absolute;
	width: 22px;
	height: 23px;
	right: 5px;
	top: 0;
	cursor: pointer;
}
.close:hover {background-image: url(images/ui/closeHover.png);}

/* Panel Tabs */

.tabBar {
	background: url(images/ui/tabBar.jpg) repeat top left;
	min-height: 1px;
/*	max-height: 42px; */
/*	clear: both; */
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	overflow: auto;
	margin: 0 -1px;
}
/* annoying hack to avoid scrollbars in .tabBar */
.tabBar::after {
	clear: both;
	content: '';
	height: 3px;
	float: left;
	background: white;
	width: 100%;
}

.tab {
	float: left;
	height: 19px;
	margin: 0 0 0 1px;
	padding: 2px 5px 0 5px;
	color: #333;
	font-size: 13px;
	background: url(images/ui/inactiveTabBG.jpg) repeat-x top left;
}
.tab:hover {
	text-decoration: underline;
	cursor: pointer;
}
.tab.active {background-image: url(images/ui/activeTabBG.jpg);}
.tab::before {
	float: left;
	width: 2px;
	height: 21px;
	margin: -2px 0 0 -5px;
	content: url(images/ui/inactiveTabStart.jpg);
}
.tab.active::before {content: url(images/ui/activeTabStart.jpg);}
.tab::after {
	float: right;
	width: 2px;
	height: 21px;
	margin: -2px -5px 0 0 ;
	content: url(images/ui/inactiveTabEnd.jpg);
}
.tab.active::after {content: url(images/ui/activeTabEnd.jpg);}


/* Panel Sections */

.panel .content {
/*
	background: #FFF;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	border-radius: 0 0 6px 6px;
	color: #333;
*/
	overflow: auto;
	margin: 0;
/*	padding: 0 5px; */
}

.panel .bottom {
	background: #FFF;
	margin: -12px 5px 0 5px;
	height: 12px;
	border-bottom: 1px solid #333;
	position: relative; /* contains absolute positioned .resizeBL/BR */
}

/* Forms on Panels */

.panel .content a {cursor: pointer; text-decoration: none;}
.panel .content a:hover {text-decoration: underline;}
.panel .content input, .panel .content select {
	background: #FFF;
	color: #333;
}
.panel .content select {
	margin-top: -1px;
	background: #FFF;
}
.panel .content > div {
	margin: 1px 5px 0 5px;
	min-height: 21px; /* ??? */
}
.panel .content td {padding-left: 5px;}
.panel:not(.loaded) .content {display: none !important;}

/* tiny images no taller than a line of text */
.inlineImage {
	max-height: 19px;
	vertical-align: middle;
}

/* #friendsConfirmed, #friendsRequested, #friendsReceived {width: 100%;} */

/* Chat */

#chatForm {
	width: 100%;
	padding: 0 5px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#chatInput {
	border: 1px solid #CCC;
	width: 100%;
	padding: 0 5px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.alert {color: #039;}
.roll {font-style: italic; color: #900;}

/* Map List */
#mapListHelp {display: none;}

/* Tiles and Brushes */
.swatch {
	border: 1px solid black;
	margin: 1px 1px 1px 1px;
	max-width: 72px;
	max-height: 72px;
}
img.swatch {
	border-color: transparent;
	border-radius: 5px;
}
.swatch.selected {
	border: 1px solid #C00;
	background-color: #FFC;
	color: #C00;
}
#tools .swatch {
	float: left;
	width: 41px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	margin: 1px;
}
#tools :first-child {
	border-radius: 10px 0 0 10px / 12.5px 0 0 12.5px;
	padding-left: 3px;
}
#tools :last-child {
	border-radius: 0 10px 10px 0 /  0 12.5px 12.5px 0;
	padding-right: 3px;
}
/* clearfix */
#tools:after {
	content: "";
	display: table;
	clear: both;
}
/*
#tools {
	position: absolute;
	background-color: #fff;
	margin-top: -1px;
	padding-top: 1px;
}
#toolOptions {
	margin-top: 30px;
}
*/
#toolOptions > div:not([data-tool=piece]) {display: none;}

/* Piece Images */
#pieceCreatorImages img, #pieceEditorImages img {
	max-width: 72px;
	max-height: 72px;
}
#pieceCreatorImages, #pieceEditorImages {
	clear: both;
	overflow: none;
}
/*#pieceCanvasMode {height: 150px;}*/
.pieceTransform {width: 5em;}
#pieceCanvasWindow {
	position: relative;
	padding: 0;
}
#pieceCanvasText {
	position: absolute;
	left: 0.5em;
	top: 0.5em;
}

#portrait {
	width: 100px;
	height: 100px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/* MAP */

#map {
	position: absolute;
	display: none;
}

/* Layers */

.mapLayer, #clickLayers, .clickLayer {position: relative;}
#fogLayer > *, #pieceLayer > *, #tileLayer > *, .clickLayer > *, #grid {
	position: absolute;
	left: 0;
	top: 0;
}

/* z-indices */
#tileLayer {z-index: -1;} /* subcontext for z-layered image tiles */
#fogLayer {z-index: 0;} /* subcontext for z-layered fog files */
/* pieces have no z-index subcontext, so they can be above or below other layers */
#clickLayers {z-index: 2;} /* higher than pieces that are above the fog */
#cursors {z-index: 3;} /* higher than everything */

/* #clickWallLayer > * {border: 1px dashed black;} /**/
/* #clickTileLayer > :hover, */
#clickWallLayer > *:hover {
	background-image: url(images/ui/glow.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#cursors {position: relative;}
#cursors > * {
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	margin: -5px;
	border-radius: 50%;
}


/* Pieces */

#clickPieceLayer > * , #pieceLayer > * {
	position: absolute;
	border: 2px dashed transparent;
}
#pieceLayer > * > div {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#clickPieceLayer > .selected {
	border-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}
#pieceLayer > .selected {
	background-image: url(images/ui/glow.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* Fog */
#fogLayer > .square {
	background-color: #000;
	width: 50px;
	height: 50px;
	margin: -25px;
}
#fogLayer > .hex {
	background-image: url('images/black-hex.png');
	background-position: center;
	background-size: 100% 100%;
	height: 50px;
	width: 57px;
	margin: -25px -28.5px;
}
#fogLayer > * > * {position: relative;}
#fogLayer > * > * > * {
	position: absolute;
	background-position: center;
	background-size: 100% 100%;
}
#fogLayer > * > * > .corner {background-image: url('images/shadow.png');}
#fogLayer > * > * > .side   {background-image: url('images/fog-side.png');}
#fogLayer > .square > * > .corner {width: 72px; height: 36px; margin: -18px -36px;}
#fogLayer > .hex    > * > .corner {width: 24px; height: 24px; margin: -12px;}
#fogLayer > .square > * > .side {width: 48px; height: 48px; margin: -24px;}
#fogLayer > .hex    > * > .side {width: 28px; height: 28px; margin: -14px;}

#fogLayer > .square > * > .n  {left: 24px; top:  0px;}
#fogLayer > .square > * > .s  {left: 24px; top: 48px;}
#fogLayer > .square > * > .w  {left:  0px; top: 24px; transform: rotate( 90deg);}
#fogLayer > .square > * > .e  {left: 48px; top: 24px; transform: rotate( 90deg);}
#fogLayer > .square > * > .nw {left:  0px; top:  0px; transform: rotate(-45deg);}
#fogLayer > .square > * > .ne {left: 48px; top:  0px; transform: rotate( 45deg);}
#fogLayer > .square > * > .sw {left:  0px; top: 48px; transform: rotate( 45deg);}
#fogLayer > .square > * > .se {left: 48px; top: 48px; transform: rotate(-45deg);}
#fogLayer > .hex > * > .side.n  {left: 28px; top:  0px;}
#fogLayer > .hex > * > .side.ne {left: 49px; top: 12px; transform: rotate( 59.25deg);}
#fogLayer > .hex > * > .side.se {left: 49px; top: 36px; transform: rotate(120.75deg);}
#fogLayer > .hex > * > .side.s  {left: 28px; top: 48px;}
#fogLayer > .hex > * > .side.sw {left:  7px; top: 36px; transform: rotate(-120.75deg);}
#fogLayer > .hex > * > .side.nw {left:  7px; top: 12px; transform: rotate( -59.25deg);}
#fogLayer > .hex > * > .corner.nw {left: 14px; top:  0px;}
#fogLayer > .hex > * > .corner.ne {left: 42px; top:  0px;}
#fogLayer > .hex > * > .corner.e  {left: 56px; top: 24px;}
#fogLayer > .hex > * > .corner.se {left: 42px; top: 48px;}
#fogLayer > .hex > * > .corner.sw {left: 14px; top: 48px;}
#fogLayer > .hex > * > .corner.w  {left:  0px; top: 24px;}

/* WELCOME */

#welcome {
	display: none;
	text-align: center;
}
#welcome h1 {margin: 14px 0 0 0;} 
#welcome p {
	text-align: left;
	margin: 7px auto;
	padding: 0 0 0 45px;
	width: 400px;
}

.box {
	border: solid black 1px;
	background: white;
	border-radius: 10px;
	padding: 7px 0;
	margin: 7px auto;
	width: 300px;
	text-align: center;
}
.box h2 {margin: 0;}
.box td {
	text-align: left;
	vertical-align: top;
	padding: 3px 0;
}
.box td+td {text-align: right;}

.box.collapsed * {display: none;}
.box.collapsed h2 {display: block;}

#loginForm table {
	margin: 0 auto;
	width: 275px;
}
#passwordForm table {
	margin: 0 auto;
	width: 285px;
}
#resetPasswordForm p {
	text-align: left;
	padding: 0 14px;
	width: auto;
}
#passwordForm {display: none;}
#unsubscribeForm {display: none;}
#resetPasswordForm {display: none;}

/* INSTALL BOX */

#installBox {
	margin: 0 auto;
	width: 300px;
	display: none;
	text-align: center;
}
#installBox p {
	margin: 10px 0;
	text-align: justify;
}
#installBox table {
	border-collapse: collapse;
	margin: 10px auto;
	text-align: left;
}
#installBox td:first {padding-right: 7px;}
#installBox td:last-child {text-align: right;}
#installBox input {border: 1px solid #CCC;}

/* MISCELLANEOUS */

.deleteButton {float: right;}
.clearBoth {
	height: 0;
	width: 1px;
	margin-top: -1px;
	clear: both;
}
.separator {
	height: 1px;
	width: auto;
	margin: 1px 0 4px 0;
	clear: both;
	background: #999;
}
.nowrap {white-space: nowrap;}
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
span.ellipsis {
	display: inline-block;
	vertical-align: middle;
}
#debug {
	position: fixed;
	top: 26px;
	right: 0;
}
